
<template>
  <div>
    <van-loading v-if="istrue" type="spinner" class="center" size="40px" />
    <div v-else>
      <div>
        <!-- 返回箭头 -->
        <div class="Arrow" @click="change">
          <img class="imgone" src="../../../assets/img/jiantou.png" alt />
        </div>

        <!-- 轮播图 -->
        <van-swipe @change="onChange">
          <van-swipe-item v-for="(item,index) in banners" :key="index">
            <img :src="item" alt />
          </van-swipe-item>
          <div class="custom-indicator" slot="indicator">{{ current + 1 }}/4</div>
        </van-swipe>
      </div>

      <!-- 包邮新品 -->
      <div class="box">
        <div style="line-height:22px; ">
          <span class="spThree">
            <span class="sp spOne">包邮</span>
            <span class="sp spTwo">新品</span>
            {{list.masterName}}
          </span>
        </div>

        <div class="dOne">{{list.slaveName}}</div>
        <div class="dTwo">
          <!-- <div> -->
          <div class="spp sppOne">￥</div>
          <div class="spp sppTwo">{{list.minPrice/100}}</div>
          <!-- </div> -->

          <div class="sppThree">{{list.cartNum}}人购买</div>
        </div>
      </div>
      <!-- 规格 -->
      <van-cell is-link>
        <div class="flex">
          <span class="spone">规格:</span>
          <span class="sptwo">x1</span>
        </div>
      </van-cell>
      <!-- 配送 -->
      <Details></Details>
      <div class="imgs">
        <img v-for="(item , index) in descPics" :key="index" :src="item" alt />
      </div>

      <!-- 购买须知 -->
      <div class="box3">
        <div>预定流程及须知</div>
        <img src="https://file.sdyxmall.com/h5/v1/public/app/img/group5.b0b24d0.png" alt />
      </div>
      <div class="box4">
        <p class="pOne pfw">一、关于发货</p>
        <p class="pTwo">您下单后商品将在购买成功后1-3个工作日内发出（周末、法定节假日需顺延）；</p>
        <p class="pOne pfw">二、关于售后</p>
        <p class="pTwo">1、生鲜类商品，不支持无理由的退货以及拒收，请您下单前认真考虑，介意请谨拍；</p>
        <p
          class="pTwo"
        >2、商品质量问题请在签收商品24小时内联系客服并提交问题商品、包装等完整照片及相关证明（订单号、清晰的快递面单图片及商品问题图片3-5张），核准后，我们将及时为您售后处理。签收时起超过24小时，平台不处理售后；</p>
        <p class="pTwo">3、确定收货后，因个人原因储存不当造成的商品变质，不在售后范围内；所以也请客户收货时开箱检查，有任何问题第一时间联系客服处理。</p>
        <p class="pTwo">【售后流程】：</p>
        <p class="pTwo">1、点击“我的-我的订单”进入订单列表页；</p>
        <p class="pTwo">2、进入订单详情页，点击仅退款（发货后），填写退款原因，上传商品图片；</p>
        <p class="pTwo">3、客服审核通过；</p>
        <p class="pTwo">4、完成退款；</p>
        <p class="pOne pfw">三、配送与签收</p>
        <p class="pTwo">1、、购买产品后，请客户保持手机畅通，由于客户手机关机或没有接通，地址错误或联系方式错误导致快递员派送不成功等客户因素，不在售后范围内。</p>
        <p
          class="pTwo"
        >2、为保障您的权益，请您签收时务必当面拆箱验货，确认无误后再进行签收，如商品配送有误、包装破损、商品腐烂、重量数量不对等问题，请当场向配送人员提出，并及时联系平台客服尽快为您处理。</p>
        <p class="pTwo">3、、您可以本人签收商品或委托他人代为签收商品，被委托人的签收视为收货人本人签收。</p>
        <p class="pTwo">苏打客服热线400-1808-400；客服服务时间：周日至周四09:00-22:00，周五至周六09:00-22:30。</p>
        <div class="qi"></div>
      </div>
      <!-- 底部 -->
      <div class="bbox">
        <router-link class="ddOne" to="/cart/edit" tag="div">
          <van-goods-action-icon
            style="width:53.25px"
            icon="cart-o"
            text
            to="/cart/Edit"
            :info="list.cartNum>0?list.cartNum:0"
            @click="gocart"
          />
        </router-link>

        <div class="ddTwo" @click="submit">立即购买</div>
        <div class="ddThree" @click="cart">加入购物车</div>
      </div>
    </div>
  </div>
</template>
<script>
import Details from "./Detail";
export default {
  data() {
    return {
      current: 0,
      banners: [],
      descPics: [],
      list: [],
      id: "",
      num: "",
      productId: 1,
      istrue: true
    };
  },
  methods: {
    submit() {
      let url = "/cart/add";
      let data = {
        productId: this.id,
        buyNum: 1
      };
      this.$axios
        .post(url, data)
        .then(res => {
          // console.log(res);
          this.productId = res.result.productId;
          this.$router.push({ path: `/order/submit/${this.productId}/${1}` });
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    gocart() {
      this.$router.push("/cart/edit");
    },
    cart() {
      let url = "/cart/add";
      let data = {
        productId: this.id,
        buyNum: 1
      };
      this.$axios
        .post(url, data)
        .then(res => {
          this.$toast("添加购物车成功");
          this.getList(this.id);
        })
        .catch(err => {
          console.log("err", err);
          this.$toast.fail("添加购物车失败");
        });
    },
    onChange(index) {
      this.current = index;
    },
    change() {
      this.$router.push("/home");
    },
    getList(id) {
      let url = "/product/detail?productId=" + id;

      this.$axios
        .get(url)
        .then(res => {
          // console.log(res);

          this.banners = res.result.banners;
          this.descPics = res.result.descPics;
          this.list = res.result;
          this.istrue = false;
        })
        .catch(err => {
          console.log("err", err);
        });
    }
  },
  components: {
    Details
  },
  created() {
    let id = this.$route.params.productId;
    this.id = id;
    this.getList(id);
  }
};
</script>
<style lang="css" scoped>
.center {
  height: 100vh;
  width: 100vw;
  text-align: center;
  position: fixed;
  top: 30%;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.imgs img {
  /* margin-top: -1px; */
  vertical-align: middle;
}
.imgone {
  height: 100%;
  /* height: 414px; */
}
img {
  height: 100%;
  width: 100%;
}
.custom-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: white;
  width: 27px;
  height: 15px;
  font-size: 12px;
  text-align: center;
  line-height: 15px;
}
.Arrow {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
}
.box {
  padding: 15px;
  background: white;
  border-bottom: 1px solid #ededed;
}
.sp {
  width: 40px;
  height: 15px;
  font-size: 10px;
  line-height: 15px;
  display: inline-block;
  text-align: center;
  color: white;
  font-weight: 700;
}
.spOne {
  background: rgb(120, 160, 209);
  margin-right: 5px;
}
.spTwo {
  background: rgb(145, 188, 111);
}
.spThree {
  font-size: 15px;
  max-height: 44px;
  display: block;
  color: #2c3e50;
}
.dOne {
  font-size: 14px;
  line-height: 20px;
  color: #797d82;
  margin-top: 8px;
  width: 345px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dTwo {
  margin-top: 10px;
  display: flex;
  /* justify-content: space-between; */
}
.spp {
  color: #c03131;
}
.sppOne {
  font-size: 15px;
  margin-right: 5px;
  margin-top: 4px;
}
.sppTwo {
  /* display: block; */
  /* display: inline-block; */
  font-size: 20px;
  /* width: 70%; */
}
.sppThree {
  /* display: block; */
  width: 280px;
  text-align: right;
  /* float: right; */
  font-size: 13px;
  color: #bdc0c5;
  margin-top: 3px;
}
.bbox {
  height: 50px;
  position: fixed;
  bottom: 0px;
  display: flex;
}
.ddOne {
  width: 53.25px;
  background: white;
  position: relative;
  border-right: 1px solid rgb(223, 220, 220);
}
.ddTwo {
  width: 160.88px;
  height: 100%;
  background: white;
  font-size: 15px;
  line-height: 50px;
  text-align: center;
}
.ddThree {
  width: 160.88px;
  height: 100%;
  background: #c03131;
  color: white;
  font-size: 15px;
  line-height: 50px;
  text-align: center;
}
.ddOne img {
  height: 28px;
  width: 28px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -14px;
  margin-top: -14px;
}
.qi {
  height: 70px;
}
.box3 div {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: #797d82;
}
.box3 img {
  width: 100%;
  height: 50px;
}
.box4 {
  padding: 0 15px;
}
.pOne,
.pTwo {
  line-height: 21px;
  margin: 12px 0;
  font-size: 10px;
  color: rgb(165, 165, 165);
}
.pfw {
  font-weight: 700;
}
</style>
